<template>
  <div class="commoditys">

    <div class="commodityBox">
        <div class="cmdBOx1">
            <div class="checkbox"><img src="https://gw.alicdn.com/imgextra/i4/O1CN01n2cA5V27Na50ntonn_!!6000000007785-2-tps-68-68.png_.webp" alt=""></div>
            <div class="tittle">天猫超市-自营配送</div>
            <span><van-icon name="arrow" /></span>
        </div>
        <div class="cmdBOx2">
            <div class="checkbox"><img src="https://gw.alicdn.com/imgextra/i4/O1CN01n2cA5V27Na50ntonn_!!6000000007785-2-tps-68-68.png_.webp" alt="">
            </div>

            <van-card   desc="描述信息" title="商品标题" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg">
                <template #tags>
                    <van-tag plain type="danger">标签</van-tag>
                    <van-tag plain type="danger">标签</van-tag>
                </template>
                <template #footer>
                    <div class="line">
                        <div class="price">￥18.9</div>
                        <div class="oprate">
                            <img src="https://gw.alicdn.com/tfs/TB1I05Qe1uSBuNjSsplXXbe8pXa-45-40.png?getAvatar=avatar_.webp" alt="">
                            <span>1</span>
                            <img src="https://img.alicdn.com/tfs/TB12tL6ThTpK1RjSZFKXXa2wXXa-45-40.png?getAvatar=avatar" alt="">
                        </div>
                    </div>
                </template>
            </van-card>

        </div>
    </div>


  </div>
</template>

<script>
import Vue from 'vue';
import { Icon } from 'vant';
import { Card } from 'vant';

Vue.use(Card);
Vue.use(Icon);
export default {
    data(){
        return{

        }
    },
}
</script>

<style scoped>
.commoditys{
    width: 94%;
    height: auto;
    background-color: #f6f6f6;
    display: flex;
    border-radius: .3rem;
    position: relative;
    margin: 0 3%;
    flex-direction: column;
    margin-bottom: .46rem;
    margin-top: 2.82rem;
}
.commodityBox{
    width: 100%;
    height: auto;
    /* margin: .24rem 0 0; */
    background: #fff;
    border-radius: .24rem;
}
.cmdBOx1{
    width: 100%;
    height: .8rem;
    display: flex;
    border-bottom: 1px solid #ffe8dd;
}
 .checkbox{
    width: .9rem;
    height: .8rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
 .checkbox img{
    width: .42rem;
    height: .42rem;
}
.tittle{
    font-size: .28rem;
    color: #333333;
    /* margin-left: 10px; */
    display: flex;
    align-items: center;
}
.cmdBOx1 span{
    font-size: .28rem;
    color: #999;
    display: flex;
    align-items: center;
}
.cmdBOx2{
    display: flex;
    align-items: center;
}
.van-card{
    flex: 1;
    background: #fff;
}
.cmdBOx2 .checkbox{
    display: flex;
   margin-bottom: .2rem;
}
.van-card__footer{
    display: flex;
    justify-content: flex-end;
}
.line{
    width: 70%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.line .price{
    color: #ff5500;
    font-size: 0.26rem;
    line-height:.8rem;
}
.oprate{
    height: .44rem;
    display: flex;

}
.oprate img{
    width: .44rem;
    height: .44rem;

}
.oprate span{
    width: .8rem;
    height: .42rem;
    text-align: center;
    color: #666;
    line-height: .44rem;
    border: 0.001rem solid #e7e7e7;
}
</style>